<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="main">
    <div class="title">
        <h2>邮箱验证登录</h2>
    </div>

    <div class="content">
        <img src="https://p2.ssl.qhimgs1.com/sdr/400__/t014108c1a1fec47d88.jpg" class="img">
        <div class="text">
            <div style="font-family: STXingkai;font-size: 15px;display: flex;justify-content: left;font-size: 30px;">尊敬的Mr ${username}:</div>
            <br/>
            <div style="font-family: STXingkai;text-align: left;display: flex;font-size: 30px">
                <div>&nbsp;&nbsp;&nbsp;&nbsp;您的登录验证码为:<p style="color: orange;display: inline;border-bottom: orange solid 1px;">${code}</p>,此登录码将于5分钟后失效，请及时进行登录验证</div>
            </div>
        </div>
    </div>

</div>
</body>
<style>
    body{
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .main{
        width: 1500px;
        height: 500px;
    }

    .title{
        height: 70px;
        width: 1500px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        background: linear-gradient(to right, #f5f0f0, #fcfccf,#f5f0f0);
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        font-size: 20px;
        font-family: STXinwei;
    }

    .content{
        height: 430px;
        width: 1500px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        display: flex;
        justify-content: center;
        overflow: hidden;
    }

    .img{
        height: 1000px;
        /*width: 700px;*/
    }

    .text{
        position: absolute;
        height: 270px;
        width: 900px;
        border-radius: 10px;
        background-color: rgba(231, 229, 229, 0.81);
        margin-top: 50px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: left;
        padding-left: 20px;
    }
</style>
</html>
